#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
@File    :   login_ref.py
@Time    :   2024/08/25 08:02:27
@Author  :   Rico Chen
@Mail    :   55059@qq.com
@Version :   1.0
@Desc    :   一个数据响应式登录界面，可以写成类形式，也可以直接写成函数
"""
from typing import Optional
from fastapi import Request
from fastapi.responses import RedirectResponse
from starlette.middleware.base import BaseHTTPMiddleware

from nicegui import app, ui
from utils.setting import passwords
from ex4nicegui import rxui, to_ref


class LoginPage:
    def __init__(self, *args, **kwargs) -> None:
        super().__init__(*args, **kwargs)
        self.username = to_ref("")
        self.password = to_ref("")

    # UI相关的函数
    def try_login(
        self,
    ) -> None:  # local function to avoid passing username and password as arguments
        # local function to avoid passing username and password as arguments
        if passwords.get(self.username.value) == self.password.value:
            app.storage.user.update(
                {"username": self.username.value, "authenticated": True}
            )
            ui.navigate.to(
                app.storage.user.get("referrer_path", "/")
            )  # go back to where the user wanted to go
        else:
            ui.notify("Wrong username or password", color="negative")

    # UI相关的界
    def login_ui(self):
        """
        UI界面部分
        """
        img = (
            ui.image(r"img/gg.png")
            .props("absolute-top text-center")
            .tailwind("h-screen mt-px")
        )

        with ui.label("").classes(
            "absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"
        ):
            # 使用网格布局才能使text-center生效
            with ui.grid():
                label1 = ui.label("欢迎访问！").tailwind(
                    "text-center text-2xl text-dark my-2"
                )
                # 发现一个问题，使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件
                # 样式的作用，而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题
                # input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').element
                rxui.input("用户", value=self.username).props("outlined").style(
                    "color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;"
                ).on("keydown.enter", self.try_login)
                rxui.input(
                    "密码",
                    value=self.password,
                    password=True,
                    password_toggle_button=True,
                ).props("outlined").style(
                    "padding-left: 2.5rem;padding-right: 2.5rem;"
                ).on(
                    "keydown.enter", self.try_login
                )
                #'gap:10em'是CSS中的一种属性值，用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。
                # 这个属性通常用于布局调整，可以在水平或垂直方向上增加或减少元素之间的间距。
                with ui.row().style("gap:12em"):
                    link1 = ui.link("忘记密码").tailwind("ml-10 w-1/3 text-left")
                    link2 = ui.link("注册账号").tailwind("ml-9 text-right")
                    # 单个空间用mx
                button1 = ui.button("登录", on_click=self.try_login).tailwind(
                    "mx-10 my-3"
                )


@ui.page("/login")
def login() -> Optional[RedirectResponse]:
    if app.storage.user.get("authenticated", False):
        return RedirectResponse("/")
    pg = LoginPage()
    pg.login_ui()
